<template>
  <h1>Ref与Reactive混用</h1>
  <div>{{ count }}</div>
  <div>{{ num.count }}</div>
  <button @click="click">改变Reactive</button>
  <button @click="changeRef">改变Ref</button>
  <div>-------------Ref解包--------------</div>
  <h2>{{ books[0] }}</h2>
  <button @click="changeBooks">改变值</button>
</template>

<script lang="ts" setup>
import { reactive, ref, onUnmounted } from 'vue'
import { useMessageStore } from '@/stores/browserMessage'

const count = ref(0)
const num = reactive({ count })
function click() {
  num.count++
}

const changeRef = () => {
  count.value++
}

const books = reactive([ref('Vue 3 Guide')])
const changeBooks = () => {
  // 当 ref 作为响应式数组或原生集合类型(如 Map) 中的元素被访问时，它不会被解包： 这里需要 .value
  books[0].value = '热爱和平'
}

const store = useMessageStore()
store.messageExam.addEventListener('message', (event) => {
  console.log(event.data)
})
onUnmounted(() => {
  console.log('关闭消息')
  // store.messageExam.close()
})
</script>
<style scoped lang='less'>
</style>
